// 加入一个上传文件组件，返回元素
function addUploadFileBox(callBackFun, required = false, allowExt = [], utwFun = alert) {
    //创建元素-allowExt: 允许的后缀名，默认不限制， utwFun 使用弹窗的函数
    return createUploadFileBox(callBackFun, required, allowExt, utwFun);
}

function checkUploadFileBox(uploadFileEl) {
    if (uploadFileEl.firstElementChild.classList.contains('required-flag') && uploadFileEl.lastElementChild.lastElementChild.style.visibility != 'visible') {
        uploadFileEl.lastElementChild.firstElementChild.classList.add('prompt');
        uploadFileEl.lastElementChild.firstElementChild.classList.add('luminescence');
        // 不通过
        return false;
    }
    // 通过
    return true;
}

function createUploadFileBox(callBackFun, required, allowExt, utwFun) {
    const uploadFileBoxEl = document.createElement("div");
    uploadFileBoxEl.className = 'upload-file-box';
    const uploadFileLableBoxEl = document.createElement("div");
    uploadFileLableBoxEl.className = 'label-style';
    if (required) {
        uploadFileLableBoxEl.classList.add('required-flag');
    }
    uploadFileLableBoxEl.innerText = '文件上传:';
    const uploadFileBodyBoxEl = document.createElement("div");
    uploadFileBodyBoxEl.className = 'content-style';
    const uploadFileMainBoxEl = document.createElement("div");
    uploadFileMainBoxEl.className = 'upload-file-main-box';
    const mianInputEl = document.createElement('input');
    mianInputEl.type = 'file';
    mianInputEl.accept = allowExt.map(v => '.' + v).join(", ");
    mianInputEl.style.display = 'none';
    const mainiImgEl = document.createElement('img');
    mainiImgEl.src = 'https://xiaomaomi-xj.gitee.io/specific-features/public/img/file.png';
    mainiImgEl.alt = '文件图片';
    const mainiSpanEl = document.createElement('span');
    mainiSpanEl.innerText = '单击或拖动文件到此区域以上载';
    const uploadFileFooterBoxEl = document.createElement("div");
    uploadFileFooterBoxEl.className = 'upload-file-footer-box';
    const footerImgEl = document.createElement('img');
    footerImgEl.src = 'https://xiaomaomi-xj.gitee.io/specific-features/public/img/link.png';
    footerImgEl.alt = '链接图片';
    const footerSpanEl = document.createElement('span');
    footerSpanEl.innerText = '';
    uploadFileMainBoxEl.appendChild(mianInputEl);
    uploadFileMainBoxEl.appendChild(mainiImgEl);
    uploadFileMainBoxEl.appendChild(mainiSpanEl);
    uploadFileFooterBoxEl.appendChild(footerImgEl);
    uploadFileFooterBoxEl.appendChild(footerSpanEl);
    uploadFileBodyBoxEl.appendChild(uploadFileMainBoxEl);
    uploadFileBodyBoxEl.appendChild(uploadFileFooterBoxEl);
    uploadFileBoxEl.appendChild(uploadFileLableBoxEl);
    uploadFileBoxEl.appendChild(uploadFileBodyBoxEl);
    // 添加选择文件事件
    uploadFileMainBoxEl.addEventListener('click', () => {
        mianInputEl.click();
    });
    //检查文件
    function checkFile(fileName) {
        //如果allowExt是空的表示无限制
        let isAllow = false;
        if (allowExt.length == 0) {
            isAllow = true;
        } else {
            allowExt.forEach(v => {
                if (fileName.endsWith(v)) {
                    isAllow = true;
                }
            });
        }
        return isAllow;
    }
    // 移除样式
    function removeStyle() {
        if (uploadFileMainBoxEl.classList.contains('prompt')) {
            uploadFileMainBoxEl.classList.remove('prompt')
        }
        if (uploadFileMainBoxEl.classList.contains('luminescence')) {
            uploadFileMainBoxEl.classList.remove('luminescence')
        }
    }

    //添加样式
    function addStyle(){
        if (!uploadFileMainBoxEl.classList.contains('prompt')) {
            uploadFileMainBoxEl.classList.add('prompt')
        }
        if (!uploadFileMainBoxEl.classList.contains('luminescence')) {
            uploadFileMainBoxEl.classList.add('luminescence')
        }
    }

    //添加拖拽文件事件
    // 阻止浏览器默认行为
    ['dragenter', 'dragover', 'dragleave', 'drop'].forEach(eventName => {
        uploadFileMainBoxEl.addEventListener(eventName, e => {
            e.preventDefault();
            e.stopPropagation();
        });
    });
    // 高亮拖拽区域
    ['dragenter', 'dragover'].forEach(eventName => {
        uploadFileMainBoxEl.addEventListener(eventName, () => {
            addStyle();
        });
    });

    ['dragleave', 'drop'].forEach(eventName => {
        // 鼠标放下或离开不做处理，留给下面的drop监听事件进行移除样式
        // uploadFileMainBoxEl.addEventListener(eventName, () => {
        //     // removeStyle();
        // });
    });
    uploadFileMainBoxEl.addEventListener('drop', e => {
        const file = e.dataTransfer.files[0];
        if (file == undefined) {
            //未选择
            return;
        }
        let fileName = file.name;
        if (!checkFile(fileName)) {
            //具体怎么弹窗，使用者控制
            utwFun(`只允许格式【${allowExt.join("、")}】的文件！`);
            return;
        }
        removeStyle();
        //选文件后显示
        footerSpanEl.innerText = fileName;
        uploadFileFooterBoxEl.style.visibility = 'visible';
        //把文件信息，送给回调函数
        callBackFun(file);
    });
    // 文件选择监听
    mianInputEl.addEventListener('change', e => {
        //只接受一个文件
        const file = e.target.files[0];
        if (file == undefined) {
            //未选择
            return;
        }
        let fileName = file.name;
        if (!checkFile(fileName)) {
            //具体怎么弹窗，使用者控制
            utwFun(`只允许格式【${allowExt.join("、")}】的文件！`);
            return;
        }
        removeStyle();
        //选文件后显示
        footerSpanEl.innerText = fileName;
        uploadFileFooterBoxEl.style.visibility = 'visible';
        //把文件信息，送给回调函数
        callBackFun(file);
    });
    return uploadFileBoxEl;
}